<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0619-JS作业-自定义滚动条-螺旋</title>
	<style type="text/css">
		html,body,.wrap{
			width: 100%;
			height: 100%;
		}
		body{
		margin: 0;
		background-color: #666;
		cursor: default;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
		}
		.wrap{
			position: relative;
			overflow: hidden;
		}
		.wrap .content{
			position: absolute;
			width: 100%;
			height: 2000px;
			background: url("images/bg.jpg") no-repeat top center/cover;
		}
		.wrap .sidebox{
			position: fixed;
			top: 0;
			bottom: 0;
			right: 30px;
			width: 20px;
			height: 90%;
			margin: auto 0;
			background-color: rgba(0,0,0,.4);
			border-radius: 10px;
		}
		.sidebox .slide{
			position: absolute;
			width: 20px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 8px 1px #000 inset;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<section class="wrap">
		<div class="content"></div>
		<div class="sidebox">
			<div class="slide"></div>
		</div>
	</section>
</body>
<script>
	var oWrap = document.getElementsByClassName('wrap')[0],
		oCont = oWrap.getElementsByClassName('content')[0],
        oSide = oWrap.getElementsByClassName('sidebox')[0],
        oSlid = oSide.getElementsByClassName('slide')[0],
		hBrow,hCont,hSide,tSide,hSlid,nSlid,mY,nWd,
		num = 0,oSw1 = false;

    //生成滚动条滑块高度 浏览器窗口大小变化时重新获取
    fnGetH();
    window.onresize = function (){
        fnGetH();
    };

    //鼠标滚轮滚动时 移动滑块 同时移动oCont
    document.addEventListener('mousewheel',function(ev){
        nWd = ev.wheelDelta/120;
        num += -nWd*20;
        if(num > 0){//判断是否出界
            oSlid.style.top = num +'px';
        }else{
            num = 0;
            oSlid.style.top = num +'px';
        }
        if(num > hSide-hSlid){
            num = hSide-hSlid;
            oSlid.style.top = num +'px';
        }
        fnBgM();//oCont的top随滑块滑动而变化
    });

    //鼠标在滑块上按住时 滑块随鼠标滑动 鼠标释放停止滑动
    oSlid.addEventListener('mousedown',fnOn,false);
    document.addEventListener('mouseup',fnOff,false);
    
	//滑块随鼠标滑动 同时移动oCont
    document.onmousemove = function(ev){
        ev = ev || window.event;
        mY = ev.clientY;
        if(oSw1){//判断是否鼠标按下
            if(mY > tSide+nSlid){//判断是否出界
                oSlid.style.top = mY-tSide-nSlid +'px';
            }else{
                oSlid.style.top = 0 +'px';
            }
            if(mY > tSide+hSide-nSlid){
                oSlid.style.top = hSide-hSlid +'px';
            }
			fnBgM();//oCont的top随滑块滑动而变化
        }
    };

	//生成滚动条滑块高度
    function fnGetH(){
        hBrow = window.innerHeight;
        hCont = parseFloat(fnGet(oCont,'height'));
        hSide = parseFloat(fnGet(oSide,'height'));
        hSlid = hSide*hBrow/hCont;
        oSlid.style.height = hSlid +'px';
        nSlid = hSlid/2;
        tSide = oSide.offsetTop;
    }
    //获取元素最终属性
    function fnGet(elem,attr){
        return getComputedStyle(elem)[attr]||elem.currentStyle[attr];
    }
	//鼠标按下开关
    function fnOn(){
        oSw1 = true;
    }
    function fnOff(){
        oSw1 = false;
    }
    //oCont的top随滑块滑动而变化
	function fnBgM(){
        oCont.style.top = -1 * (hCont-hBrow) * parseFloat(oSlid.style.top) / (hSide-hSlid) +'px';
    }
</script>
</html>